<template>
  <div id="selectDpNumber">
    <el-form-item :label="fileData.labelName">
      <el-select
        v-model="fileData.dpNum"
        multiple
        filterable
        remote
        :no-data-text="noData"
        placeholder="请输入大鹏号"
        :remote-method="remoteMethod"
        :loading="inputLoading"
        clearable
      >
        <el-option
          v-for="item in options"
          :key="item.userId"
          :label="item.dpNumber"
          :value="item.dpNumber"
          :disabled="fileData.dpNum.length >= fileData.limit"
        >
        </el-option>
      </el-select>
      <slot name="tips"></slot>
    </el-form-item>
  </div>
</template>

<script>
import { getDpNum } from '@/api/system/user' // 接口
export default {
  name: 'selectDpNumber',
  msg: '可输入搜索下拉框-查询大鹏号',
  props: {
    fileData: {
      type: Object,
      default: function() {
        return {
          labelName: '', // label名称
          dpNum: [], // 大鹏号
          limit: 5 // 限制个数
        }
      }
    }
  },
  data() {
    return {
      options: [], // 大鹏号下拉列表
      noData: '请再输入至少10个字符',
      inputLoading: false
    }
  },
  mounted() {},
  methods: {
    /*获取大鹏号*/
    getDapengNum(dpAccounts) {
      return new Promise((resolve, reject) => {
        let obj = { type: 'DPACCOUNT', value: dpAccounts }
        getDpNum(
          obj,
          (response) => {
            resolve(response)
          },
          (response) => {
            this.$message.warning(response.message)
            resolve([])
          }
        )
      })
    },
    /*输入框内容改变时，执行*/
    async remoteMethod(query) {
      /* console.log("query",query)*/
      query = query.trim()
      let _this = this
      if (query.length > 9) {
        _this.inputLoading = true
        let result = await this.getDapengNum(query)
        let ary = result.rows
        if (ary.length === 0) {
          setTimeout(() => {
            _this.options = []
            _this.inputLoading = false
            this.noData = '没有找到匹配大鹏号'
          }, 200)
        } else {
          setTimeout(() => {
            _this.options = [...ary]
            _this.inputLoading = false
            /* console.log("this.options=",this.options)*/
          }, 200)
        }
      } else {
        _this.options = []
        let n = 10 - query.length
        this.noData = `请再输入${n}个字符`
      }
    }
  }
}
</script>

<style lang="less">
#selectDpNumber {
}
</style>
